<template>
    <div class="ogn-detail">
        <div class="center-box fc" :style="{ height:pageHeight - 135 + 'px' ,overflowY:'auto'}">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" v-loading.body="loading" element-loading-text="拼命加载中" class="margin10">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="头像" prop="avatar">
                            <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="姓名" prop="realname">
                            <el-input v-model="ruleForm.realname"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="账号" prop="username">
                            <span >{{ruleForm.username}}</span>
                            <el-input v-model="ruleForm.username"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="密码" prop="password">
                            <el-input type="password" v-model="ruleForm.password" auto-complete="new-password"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="手机号" prop="phone">
                            <el-input v-model="ruleForm.phone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="邮箱" prop="email">
                            <el-input v-model="ruleForm.email"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="fbtn">
                <el-button @click="goBack($event)">返回</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')" :loading="onSubmit"> {{btnText}}
                </el-button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "",
        components: {
        },
        data() {
            return {
                isPermission: false,
                // logo          : 'this.src="' + require('@/assets/images/userPic.png') + '"',
                loading: false,
                btnText: '保存',
                breadName: '',
                imageUrl:'',
                OrgTitle: "",
                onSubmit: false,
                systemRoleList: [],
                avatar: '',
                roleNames: [],
                userType: '',
                user_types: [],
                user_typeList: [],
                ruleForm: {
                    organizationId: '',
                    realname: '', //姓名
                    username: '', //账号
                    password: '', //密码
                    phone: '', //手机号
                    email: '',
                    roleName: '',
                },
                rules: {
                    realname: [{
                            required: true,
                            message: '请输入姓名',
                            trigger: 'blur'
                        },
                        {
                            min: 2,
                            max: 20,
                            message: '长度在 2 到 20 个字符',
                            trigger: 'blur'
                        }
                    ],
                    username: [{
                            required: true,
                            message: '请输入账号',
                            trigger: 'change'
                        },
                        {
                            min: 5,
                            max: 20,
                            message: '长度在 5 到 20 个字符',
                            trigger: 'blur'
                        }
                    ],
                    password: [{
                        required: true,
                        message: '请填写密码',
                        trigger: 'change'
                    }, {
                        pattern: /^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])\S*$/,
                        message: '请输入至少六位字符,包括大写字母,小写字母,数字'
                    }],
                    phone: [{
                            required: true,
                            message: '请填写手机号码',
                            trigger: 'blur'
                        },
                        {
                            pattern: /^[1][3,4,5,7,8,9][0-9]{9}$/,
                            message: '请输入正确的手机号'
                        }
                    ],
                    locked: [{
                        required: true,
                        message: '请选择',
                        trigger: 'change'
                    }],
                },
                defaultProps: {
                    label: 'text',
                    children: 'nodes',
                    value: 'id'
                },
                dataTrees: [],
                selectedOptions: [],
            }
        },
        computed: {
            pageHeight() {
                return this.$store.getters.pageHeight;
            },
        },
        mounted() {
        },
        methods: {
            submitForm(ruleForm) {
                this.$refs[ruleForm].validate((valid) => {
                    if (valid) {
                        this.ruleForm.avatar = this.avatar;
                        this.ruleForm.user_type = this.user_types ? this.user_types.join(',') : '';
                        this.ruleForm.roleName = this.roleNames ? this.roleNames.join(',') : '';
                        this.onSubmit = true;
                        this.$http.post('/bbbbbbbbbbbbbbbb', this.ruleForm).then((response) => {
                            if (response.data.code == 201) {
                                this.$notify({
                                    title: "提示",
                                    message: "操作成功！",
                                    type: "success"
                                });
                                this.$router.back();
                                this.onSubmit = false;
                            } else {
                                this.onSubmit = false;
                                this.$message(response.data.data);
                            }
                        }).catch((error) => {
                            this.onSubmit = false;
                        });
                    }
                });
            },
            goBack(e) {
                console.log('33333333',e);
                // this.$router.back();
            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
            // handleAvatarSuccess(res, file) {
    }}
</script>
<style lang="scss" scoped>
    .avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: block;
        border: 1px dashed #eee;
    }
</style>